<template>
    <!--<div>-->

      <div class="rightCon">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="手机快速登录" name="loginValidateForm">
            <el-form ref="loginValidateForm" :model="loginInfo" :rules="loginRules" class="" >
              <el-form-item prop="phoneUser">
                <el-input @keyup.enter.native="enterLogin" type="tel" :autofocus="focusFlag" placeholder="填写手机号" maxLength="11" auto-complete="off"
                   v-model.trim="loginInfo.phoneUser" ref="phoneLoginUser"></el-input>
                <span class="input-placeholder" @click="getFocus('phoneLoginUser')" v-if="!loginInfo.phoneUser">填写手机号</span>
              </el-form-item>
              <transition name="fade">
                <el-form-item prop="codeUser2" class="verifyCode" v-show="checkPhone">
                  <el-input ref="phoneLoginCode" class="msgcode" maxLength="5" v-model.trim="loginInfo.codeUser2"  placeholder="请输入右边验证码信息"></el-input>
                  <span class="input-placeholder" @click="getFocus('phoneLoginCode')" v-if="!loginInfo.codeUser2">请输入右边验证码信息</span>
                  <el-tooltip class="item" effect="light" content="点击切换" placement="top-end">
                    <div class="randomCode" style="padding: 0;border: none"> <div id="v_container" style="width: 97px;height: 40px;margin: 0 auto;"></div></div>
                  </el-tooltip>
                </el-form-item>
              </transition>
              <el-form-item prop="codeUser" class="sendmsg">
                <el-input ref='phoneLoginPwd' @keyup.enter.native="enterLogin" class="msgcode" maxLength="6" v-model.trim="loginInfo.codeUser"  placeholder="短信验证码"></el-input>
                <el-button class="sendBtn" @click="loginCode('')" :disabled="ableCode">{{fontTime}}</el-button>
                <span class="input-placeholder" @click="getFocus('phoneLoginPwd')" v-if="!loginInfo.codeUser">短信验证码</span>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="密码账号登录" name="accountValidateForm">
            <el-form ref="accountValidateForm" :model="loginInfo" :rules="loginRules" class="" >
              <el-form-item prop="userName">
                <el-input ref="pwdLoginPnohe" @keyup.enter.native="enterLogin" type="tel" :autofocus="focusFlag1" v-model.trim="loginInfo.userName" maxLength="11"
                          placeholder="" auto-codialogShowmplete="off"></el-input>
                          <span class="input-placeholder" @click="getFocus('pwdLoginPnohe')" v-if="!loginInfo.userName">填写手机号</span>
              </el-form-item>
              <el-form-item prop="passWord">
                <el-input ref="pwdLoginPwd" @keyup.enter.native="enterLogin" :type="eye? 'text':'password'" maxLength="20"  v-model.trim="loginInfo.passWord"  placeholder=""></el-input>
                <span class="input-placeholder" @click="getFocus('pwdLoginPwd')" v-if="!loginInfo.passWord">输入密码</span>
                <i :class="eye? 'icon-mimakeshi_y':'icon-mimakeshi_n'" @click="look()"></i>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer loading-wrapper">
          <el-button  :loading="loadBool" @click="dialogShow(ref)" :disabled="ableLogin">登录</el-button>
          <p>还没有账号？<span @click="regis()">立即注册</span></p>
          <p class="forgetpsd" @click="forget()">忘记密码？</p>
        </span>
      </div>
    <!--</div>-->
</template>

<script>
  import Verify from 'plus/getVerify'
  import * as opreate from 'api/getData'
  import mixins from 'plus/mixin'
  import { mapActions , mapGetters } from 'vuex'
  import { setToken } from 'plus/auth'
  export default {
     name: "login",
     mixins: [mixins.mixin],
     props:{
     },
     data(){
         return{
           ref:'loginValidateForm',
           times:'60',
           checkPhone:false,
           loadBool: false,
           time1:'',
           ableLogin:true,
           ableCode:true,
           fontTime:'发送验证码',
           eye:false,
           focusFlag:false,
           focusFlag1:false
         }
     },
     inject:['reload'],
     computed:{
        ...mapGetters([
          'resetFlag'
        ])
     },
     mounted(){
       this.setFlag(false)
       this.codeUser2 = new Verify("v_container")
     },
     methods:{
      ...mapActions([
        'setFlag'
      ]),
      enterLogin(){
        //console.log('enter')
        this.dialogShow(this.ref)
      }, 
      look(){
        this.eye = !this.eye
      },
      handleClick(tab, event) {
        this.ableCode = true
        this.ableLogin = true
        let isReset = tab.name
        this.ref =  isReset
        if( isReset === "loginValidateForm"){
          if(this.loginInfo.userName.length == '11'){
            this.focusFlag = false
            this.loginInfo.phoneUser = this.loginInfo.userName
            this.focusFlag = true
          }
          this.$refs.accountValidateForm.resetFields()
        }else{
          if(this.loginInfo.phoneUser.length == '11') {
            this.focusFlag1 = false
            this.loginInfo.userName = this.loginInfo.phoneUser
            this.focusFlag1 = true

          }
          this.$refs.loginValidateForm.resetFields()
        }
      },
      ...mapActions([
        "setUser",
        'setFlag',
        'setDialogClose'
      ]),
      dialogShow1(){
        if(this.ref === 'accountValidateForm'){
          opreate.login(this.loginInfo.userName,this.loginInfo.passWord).then(res =>{
            if(res.user){
              setToken(res.user.token)
              this.setUser(res.user)

              // this.$emit("update:dialogVisibleLogin",this.val)
              this.setDialogClose(false)
              this.loadBool = false
              this.ableLogin = true
              for (let i in this.$refs){
                if(this.$refs[i]['resetFields']){
                  this.$refs[i].resetFields()
                }
              }
              this.reload()
            }else {
              this.loginMsg = res.message
              if(res.code == '50001'){
                this.$refs['accountValidateForm'].validateField("userName")
              }else {
                this.$refs['accountValidateForm'].validateField("passWord")
              }

            }
            this.loadBool = false
          })
        }else {
          this.loginCode(this.loginInfo.codeUser)
        }
      },
      loginCode(code){
        this.$refs['loginValidateForm'].validateField("phoneUser",(v) => {
          if(v == ''){
            this.$refs['loginValidateForm'].validateField("codeUser2",(c) => {
              if(c == ''){
                opreate.loginByPhone(this.loginInfo.phoneUser,code).then(res =>{
                  if(res.user){
                    setToken(res.user.token)
                    this.setUser(res.user)
                    this.setDialogClose(false)
                    // this.$emit("update:dialogVisibleLogin",this.val)
                    this.loadBool = false
                    this.ableLogin = true
                    clearInterval(this.time1)
                    this.fontTime = '发送验证码'
                    this.checkPhone = false
                    for (let i in this.$refs){
                      if(this.$refs[i]['resetFields']){
                        this.$refs[i].resetFields()
                      }
                    }
                  }else {
                    this.loginMsg = res.message
                    if(res.code == '50001'){
                      this.$refs['loginValidateForm'].validateField("phoneUser")
                    }else if(!res.code){
                      if(code == '' && this.loginInfo.codeUser2 !== ''){
                        this.times = 60
                        this.ableCode = true
                        this.time1 = setInterval( () =>{
                          if(this.times <= 0){
                            clearInterval(this.time1)
                            this.ableCode = false
                            this.fontTime = '发送验证码'

                          }else {
                            this.times--
                            this.fontTime = '已发送('+ this.times + ')'
                          }
                        },1000)
                      }
                    }else if(res.code == '1'){
                      this.loginMsg = res.data.Exception
                      this.$refs['loginValidateForm'].validateField("codeUser")
                      this.loadBool = false
                    }else {
                      this.$refs['loginValidateForm'].validateField("codeUser")
                      this.loadBool = false
                    }
                  }
                })
              }
            })


          }
        })
      },
      forget(){
        this.$emit('forgetPwd')
      },
      regis(){
        this.$emit('register')
      },
      checkNum(el){
      },
      getFocus(el){
        this.$refs[el].focus()
      }
     },
    watch:{
      resetFlag(e){
        if(e === true){
          for (let i in this.$refs){
            if(this.$refs[i]['resetFields']){
              this.$refs[i].resetFields()
            }
          }
        }
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~style/base"

  .forgetpsd
    text-align right
    color $color-person-text
    font-size $font-size-medium
    margin-bottom: 2vh;
    margin-top: 4vh;
    cursor pointer

  .fade-enter-active, .fade-leave-active
    transition: all 1s;

  .fade-enter, .fade-leave-to
    opacity: 0;
    transform: translateY(-40px);

  .el-button
    padding 12px 0px
    border none

.input-placeholder{
  position absolute
  left 0
  top 0
  color rgba(118,118,118,1)
}
.rightCon /deep/ .el-tabs__item:focus.is-active.is-focus:not(:active)
{
  -webkit-box-shadow:0 0 2px 2px #fff inset;
  box-shadow:0 0 2px 2px #fff inset;
}
</style>
